<template>
  <div class="mobile-signup">
    <!-- iOS状态栏 -->
    <div class="status-bar">
      <div class="left-side">
        <span class="time">9:41</span>
      </div>
      <div class="notch">
        <img src="@/assets/images/mobile-ui/notch-icon.svg" alt="notch" class="notch-icon" />
      </div>
      <div class="right-side">
        <div class="signal-icons">
          <div class="mobile-signal"></div>
          <div class="wifi-signal"></div>
          <div class="battery">
            <div class="battery-level"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页面头部 -->
    <div class="page-header">
      <span class="login-text" @click="onSwitchToLogin">Login</span>
      <span class="signup-text">Sign Up</span>
      <div class="close-btn" @click="onClose">
        <img src="@/assets/images/mobile-ui/close-icon.svg" alt="close" class="close-icon" />
      </div>
    </div>

    <!-- 表单内容 -->
    <div class="form-content">
      <!-- 姓名输入框 -->
      <div class="input-group">
        <input 
          v-model="theFormData.name" 
          type="text" 
          placeholder="Name" 
          class="input-field"
        />
      </div>

      <!-- 邮箱输入框 -->
      <div class="input-group">
        <input 
          v-model="theFormData.email" 
          type="email" 
          placeholder="Email" 
          class="input-field"
        />
      </div>

      <!-- 密码输入框 -->
      <div class="input-group">
        <input 
          v-model="theFormData.password" 
          :type="thePasswordVisible ? 'text' : 'password'" 
          placeholder="Password" 
          class="input-field"
        />
        <span class="show-btn" @click="onTogglePassword">Show</span>
      </div>

      <!-- 复选框选项 -->
      <div class="checkbox-option">
        <div class="checkbox-wrapper" @click="onToggleNewsletter">
          <div class="checkbox" :class="{ checked: theFormData.newsletter }">
            <div v-if="theFormData.newsletter" class="checkmark">✓</div>
          </div>
        </div>
        <span class="checkbox-text">
          I would like to receive your newsletter and other promotional information.
        </span>
      </div>
    </div>

    <!-- iOS键盘 -->
    <div class="ios-keyboard">
      <div class="keyboard-background">
        <div class="home-indicator"></div>
        <div class="keyboard-keys">
          <!-- 第一行 -->
          <div class="key-row">
            <div class="key" v-for="key in theFirstRow" :key="key" @click="onKeyPress(key)">
              {{ key }}
            </div>
          </div>
          <!-- 第二行 -->
          <div class="key-row">
            <div class="key" v-for="key in theSecondRow" :key="key" @click="onKeyPress(key)">
              {{ key }}
            </div>
          </div>
          <!-- 第三行 -->
          <div class="key-row">
            <div class="key" v-for="key in theThirdRow" :key="key" @click="onKeyPress(key)">
              {{ key }}
            </div>
          </div>
          <!-- 第四行 -->
          <div class="key-row bottom-row">
            <div class="key special-key" @click="onKeyPress('123')">123</div>
            <div class="key emoji-key" @click="onKeyPress('emoji')">😀</div>
            <div class="key space-key" @click="onKeyPress(' ')">space</div>
            <div class="key special-key" @click="onKeyPress('Go')">Go</div>
            <div class="key delete-key" @click="onDeleteKey">⌫</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'

// 表单数据 start
const theFormData = ref({
  name: '',
  email: '',
  password: '',
  newsletter: false
})

const thePasswordVisible = ref(false)
// 表单数据 end

// 键盘数据 start
const theFirstRow = ref(['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'])
const theSecondRow = ref(['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'])
const theThirdRow = ref(['z', 'x', 'c', 'v', 'b', 'n', 'm'])
// 键盘数据 end

// 切换到登录页面
const onSwitchToLogin = () => {
  console.log('切换到登录页面')
}

// 关闭页面
const onClose = () => {
  console.log('关闭页面')
}

// 切换密码可见性
const onTogglePassword = () => {
  thePasswordVisible.value = !thePasswordVisible.value
}

// 切换订阅选项
const onToggleNewsletter = () => {
  theFormData.value.newsletter = !theFormData.value.newsletter
}

// 键盘按键处理
const onKeyPress = (key: string) => {
  console.log('按键:', key)
  // 这里可以添加具体的按键逻辑
}

// 删除键处理
const onDeleteKey = () => {
  console.log('删除键')
  // 这里可以添加删除逻辑
}
</script>

<style lang="scss" scoped>
.mobile-signup {
  width: 375px;
  height: 812px;
  background: #ffffff;
  position: relative;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  .status-bar {
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background: #ffffff;
    position: relative;
    
    .left-side {
      .time {
        font-size: 15px;
        font-weight: 600;
        color: #000000;
        letter-spacing: -0.3px;
      }
    }
    
    .notch {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      
      .notch-icon {
        width: 209px;
        height: 30px;
      }
    }
    
    .right-side {
      .signal-icons {
        display: flex;
        align-items: center;
        gap: 5px;
        
        .mobile-signal {
          width: 17px;
          height: 10px;
          background: linear-gradient(to right, 
            #000 0%, #000 25%, 
            #000 25%, #000 50%, 
            #000 50%, #000 75%, 
            #000 75%, #000 100%);
          border-radius: 1px;
        }
        
        .wifi-signal {
          width: 15px;
          height: 11px;
          background: #000;
          border-radius: 1px;
          position: relative;
          
          &::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at bottom, transparent 40%, #000 41%);
          }
        }
        
        .battery {
          width: 24px;
          height: 11px;
          border: 1px solid rgba(0, 0, 0, 0.35);
          border-radius: 2.5px;
          position: relative;
          
          &::after {
            content: '';
            position: absolute;
            right: -3px;
            top: 3px;
            width: 1px;
            height: 4px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 0 1px 1px 0;
          }
          
          .battery-level {
            width: 18px;
            height: 7px;
            background: #000;
            border-radius: 1px;
            margin: 1px;
          }
        }
      }
    }
  }
  
  .page-header {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0 20px;
    
    .login-text {
      position: absolute;
      left: 20px;
      font-size: 17px;
      font-weight: 400;
      color: #007AFF;
      cursor: pointer;
      
      &:hover {
        opacity: 0.7;
      }
    }
    
    .signup-text {
      font-size: 17px;
      font-weight: 600;
      color: #000000;
      letter-spacing: -0.4px;
    }
    
    .close-btn {
      position: absolute;
      right: 20px;
      width: 24px;
      height: 24px;
      cursor: pointer;
      
      .close-icon {
        width: 100%;
        height: 100%;
      }
      
      &:hover {
        opacity: 0.7;
      }
    }
  }
  
  .form-content {
    padding: 20px;
    
    .input-group {
      margin-bottom: 16px;
      position: relative;
      
      .input-field {
        width: 100%;
        height: 50px;
        background: #F2F2F7;
        border: 1px solid #E5E5EA;
        border-radius: 8px;
        padding: 0 16px;
        font-size: 17px;
        color: #000000;
        outline: none;
        
        &::placeholder {
          color: #8E8E93;
          font-weight: 400;
        }
        
        &:focus {
          border-color: #007AFF;
          background: #ffffff;
        }
      }
      
      .show-btn {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 17px;
        color: #007AFF;
        cursor: pointer;
        
        &:hover {
          opacity: 0.7;
        }
      }
    }
    
    .checkbox-option {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-top: 24px;
      
      .checkbox-wrapper {
        cursor: pointer;
        
        .checkbox {
          width: 20px;
          height: 20px;
          background: #F2F2F7;
          border: 1px solid #E5E5EA;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s ease;
          
          &.checked {
            background: #007AFF;
            border-color: #007AFF;
          }
          
          .checkmark {
            color: #ffffff;
            font-size: 12px;
            font-weight: 600;
          }
        }
      }
      
      .checkbox-text {
        flex: 1;
        font-size: 13px;
        color: #8E8E93;
        line-height: 1.4;
        margin-top: 2px;
      }
    }
  }
  
  .ios-keyboard {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    
    .keyboard-background {
      background: #D1D5DB;
      border-top: 1px solid #C7C7CC;
      padding: 10px 3px 0;
      
      .home-indicator {
        width: 134px;
        height: 5px;
        background: #000000;
        border-radius: 100px;
        margin: 0 auto 21px;
      }
      
      .keyboard-keys {
        .key-row {
          display: flex;
          justify-content: center;
          gap: 6px;
          margin-bottom: 12px;
          
          &.bottom-row {
            gap: 6px;
            
            .space-key {
              flex: 1;
              max-width: 163px;
            }
          }
          
          .key {
            min-width: 32px;
            height: 42px;
            background: #FFFFFF;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 23px;
            font-weight: 400;
            color: #000000;
            cursor: pointer;
            box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
            transition: all 0.1s ease;
            
            &:active {
              transform: scale(0.95);
              background: #E5E5EA;
            }
            
            &.special-key {
              background: #AEB3BA;
              color: #000000;
              font-size: 16px;
              font-weight: 400;
              min-width: 42px;
            }
            
            &.emoji-key {
              background: #AEB3BA;
              font-size: 20px;
              min-width: 42px;
            }
            
            &.delete-key {
              background: #AEB3BA;
              color: #000000;
              font-size: 18px;
              min-width: 42px;
            }
          }
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 375px) {
  .mobile-signup {
    width: 100vw;
    height: 100vh;
  }
}
</style>